<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/4/11
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.7.0
  -->

<template>
  <el-dialog
    :visible.sync="Show"
    title=""
    :fullscreen='true'
    :show-close='false'
    append-to-body
    custom-class="fulldialog route-dialog"
    :close-on-press-escape="false">
      <span class="custom-dialog-btn" @click="cancel">
        <i class="el-icon-close"></i>
      </span>
    <el-container>
      <el-header>
        <p class="plantitle">添加传感器</p>
      </el-header>
      <el-main>
        <el-container>
          <el-container>
            <div class="flex-left-pannel">
              <el-table
                key='tableKey'
                :data="list"
                ref="multipleTable"
                v-loading="listLoading" fit style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column label="设备编号">
                  <template slot-scope="scope">
                    <span v-if="scope.row.sensorNo">{{scope.row.sensorNo.split(":")[0]}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="厂商">
                  <template slot-scope="scope">
                    <span>{{scope.row.manufacturer}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="系列">
                  <template slot-scope="scope">
                    <span>{{scope.row.equipmentType}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="型号">
                  <template slot-scope="scope">
                    <span>{{scope.row.model}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="设备名">
                  <template slot-scope="scope">
                    <span>{{scope.row.deviceName}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div v-show="!listLoading" class="sensor-pagination-container">
                <div>
                  <el-checkbox v-model="isselall" :indeterminate="isIndeterminate" @change="handleCheckAllChange" v-show="list&&list.length!==0">全选</el-checkbox>
                  <el-button type="text" style="margin-left: 10px;" @click="addToRule" v-show="list&&list.length!==0" :disabled="checklist&&checklist.length===0">添加</el-button>
                </div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
              </div>
            </div>
          </el-container>
          <el-aside width="250px" class="flex-right-pannel_withline">
            <el-scrollbar style="height:85vh">
              <p class="right-tree-title">设备组列表</p>
              <dl class="video-group-list">
                <dt class="video-group-head" @click="curIndex='';groupId='';getList()">全部设备</dt>
                <dd class="video-group-content">
                  <ul class="video-group-itemlist" v-if="videogrouplist&&videogrouplist.length>0">
                    <li class="video-group-item" :class="{'video-group-checked':curIndex===index}" v-for="(item,index) in videogrouplist" :key="index" :title="item.deviceGroupName" @click="changeGroup(item.id,index)"><i class="video-dot"></i>{{item.deviceGroupName}}</li>
                  </ul>
                  <div class="no-data" v-else>
                    当前暂无设备组
                  </div>
                </dd>
              </dl>
            </el-scrollbar>
          </el-aside>
        </el-container>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
  import {
    getDeviceTree,
  } from "@/api/device/deviceVideoExt/index";

  import {
    unNestedPage,
    addSensor
  } from "@/api/datahandler/pushRules/index";

  export default {
    name: "fireDevice",
    props:{
      Show:{
        type:Boolean,
        default:false,
      },
      noticeRuleId:{
        default:'',
      },
      channelId:{
        default: '',
      }
    },
    data(){
      return{
        list:[],
        curIndex:'',
        videogrouplist:[],
        listQuery: {
          page: 1,
          limit: 10,
          code: ''
        },
        groupId:'',
        total:0,
        checklist:[],
        listLoading:false,
        isselall:false,
        isIndeterminate:false,
      }
    },
    methods: {
      init(){
        //初始化
        this.getList();
        this.getGrouplist();
      },
      getList(){
        //列表获取
        this.listLoading = true;
        unNestedPage(Object.assign({},this.listQuery,{channelId:this.channelId,groupId:this.groupId})).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        })
      },
      getGrouplist(){
      //获取设备组列表
        getDeviceTree().then(res=>{
          this.videogrouplist = res;
        })
      },
      changeGroup(id,index){
        //改变分组后的列表
        this.groupId = id;
        this.curIndex = index;
        this.getList();
      },
      handleSelectionChange(val){
        this.checklist=[...val];
        let length = this.total>this.list.length?this.list.length:this.total;
        this.isselall = val.length === length&&length>0;
        this.isIndeterminate = val.length>0&&val.length<length;
      },
      cancel() {
        this.$emit("update:Show", false);
      },
      handleCheckAllChange(){
        this.$refs.multipleTable.toggleAllSelection();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      addToRule(){
        //添加到规则列表
        this.delsensorid=[];
        this.checklist.forEach((item,index)=>{
          this.delsensorid.push(item.id);
        });
        addSensor(Object.assign({},{sensorIds:(this.delsensorid).toString(),noticeRuleId:this.noticeRuleId})).then(res=>{
          if (res.status===200){
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000
            });
            this.curIndex='';
            this.groupId='';
            this.$emit("update:Show", false);
            this.$emit("updateList");
          }
        })
      },
    },
    watch: {
      Show(v) {
        if (v) {
          let self = this;
          this.$nextTick(() => {
            self.init();
          });
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">

  .flex-right-pannel_withline {
    border-left: 1px solid transparent;
    min-height: 86vh;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-tree-node__label {
      font-size: 14px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .video-group-list{
    /* 视频设备组*/
      .video-group-head{
        color: #2683F5;
        background: #F1F1F1;
        padding: 0 20px;
        line-height: 26px;
        cursor: pointer;
        margin-bottom: 10px;
      }
      .no-data{
        text-align: center;
        line-height: 60px;
        color: #999;
      }
      .video-group-content,.video-group-itemlist{
        margin: 0;
        padding: 0;
      }
      .video-group-item{
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
        line-height: 26px;
        padding: 0 20px;
        cursor: pointer;
        .video-dot{
          display: inline-block;
          width:6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 10px;
          background: #08FF68;
        }
        &.video-group-checked{
          color: #2683f5;
          background: #F1F1F1;
        }
      }
    }
  }
  .sensor-pagination-container{
    display:flex;
    justify-content:space-between;
    padding:10px 10px;
  }
  .build-custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .fulldialog{
    &.route-dialog{
      .flex-left-pannel{
        padding-left: 30px;
        padding-bottom: 20px;
        height: calc(100vh - 60px);
        overflow-y: auto;
      }
      .flex-left-pannel_withline{
        min-height: 86vh;
        box-sizing: border-box;
        padding: 10px;
      }
      .el-checkbox{
        display: inline-block;
      }
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
      .custom-dialog-btn {
        position: absolute;
        font-size: 30px;
        left: 24px;
        top: 14px;
        color: #fff;
        &:hover {
          cursor: pointer;
        }
      }
      .el-header {
        padding: 0;
      }
      .el-dialog__header {
        display: none;
      }
      .el-dialog__body {
        padding: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
        .is-vertical {
          height: 100%;
        }
      }
      .plantitle {
        text-align: center;
        font-size: 20px;
      }
    }
  }
</style>
